<template>
  <div class="app-main">
    <div class="header box-shadow">
      <div class="searchBar">
        <div class="category">
          <el-dropdown style="width: 100%" @command="handleCommand">
            <div class="pointer">
              <span class="text mgr10">{{ queryParams.TypeName }}</span>
              <el-icon :size="24"><CaretBottom /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="item" v-for="item in TypeList">{{
                  item.Name
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="searchInput">
          <el-input
            v-model="queryParams.Name"
            clearable
            placeholder="搜索视频"
          ></el-input>
        </div>
        <div class="searchBtn" @click="getList">
          <el-icon><Search /></el-icon>
        </div>
      </div>
    </div>
    <div class="typeRow">
      <div class="flex fnw sliderBar">
        <div
          @mousedown="handleMouseDown"
          class="pointer item box-shadow"
          v-for="(item, index) in TypeList"
          :class="{ 'active-type': item.ID == activeType }"
          @click="handleChooseType(item, index)"
        >
          {{ item.Name }}
        </div>
      </div>
    </div>
    <div class="pageBar flex jbetween acenter r10 box-shadow">
      <div class="flex">
        <el-dropdown style="width: 100%" @command="handleSortType">
          <div class="pointer box-shadow">
            <div>
              <span class="text mgr10">{{
                sortTypeObj[queryParams.sortType]
              }}</span>
              <el-icon :size="16"><CaretBottom /></el-icon>
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in sortList" :command="item">{{
                item.name
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="pointer box-shadow" @click="handleSwitchSortType">
          <div style="width: 100px">
            <span class="text mgr10">{{
              sortCategoryObj[queryParams.sortCategory]
            }}</span>
            <el-icon :size="16"><Sort /></el-icon>
          </div>
        </div>
      </div>

      <div>
        <pagination
          class="mgr10"
          v-show="total > 0"
          :total="total"
          v-model:page="page.PageIndex"
          v-model:limit="page.PageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <div class="mainCentent">
      <div v-for="item in tableList" class="item" @click="handleGoDetail(item)">
        <div class="pictrue">
          <el-image
            fil="cover"
            :src="proxy.$addFileHead(item.VideoCover)"
          ></el-image>
          <div class="playIcon">
            <!-- <svg-icon icon-class="play"></svg-icon> -->
          </div>
          <div class="iconBar">
            <div class="view">
              <el-icon><View /></el-icon>
              <span class="num">{{ item.ViewCounts }}</span>
            </div>
          </div>
        </div>
        <div class="videoTitle">{{ item.Name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup name="searchPage">
import { getToken } from '@/utils/auth';
import { useRouter } from 'vue-router';
// import PlayIcon from '@/asset/
import {
  DelCourse,
  AddViewCounts,
  AddOrEditCourse,
  GetCourseList_Page,
  GetCourseDetail
} from '@/api/online/platform.js';
import { GetTypeList_Page } from '@/api/online/type.js';
const { proxy } = getCurrentInstance();
const router = useRouter();
const queryParams = ref({
  Type: '', //网课类型ID
  TypeName: '网课类型', //ID
  Name: '', //网课名称
  NoPage: '',
  sortType: 'CreateTime',
  sortCategory: 'DESC',
  SortOrder: 'CreateTime DESC' //根据字段名排序，正序:ASC 倒序:DESC（字段名+空格+顺序）
});
const sortTypeObj = {
  CreateTime: '上传时间',
  ViewCounts: '观看次数',
  UpdateTime: '更新时间'
};
const sortCategoryObj = {
  DESC: '倒序',
  ASC: '正序'
};
const activeType = ref(0);
const total = ref(1);
const page = ref({
  PageIndex: 1,
  PageSize: 21
});
const sortList = ref([
  {
    name: '上传时间',
    value: 'CreateTime'
  },
  {
    name: '观看次数',
    value: 'ViewCounts'
  },
  {
    name: '更新时间',
    value: 'UpdateTime'
  }
]);
const tableList = ref([]);
const TypeList = ref([]);
const isDrag = ref(false); //是否在拖拽
const isClick = ref(false); //是否是单击
const startW = ref(0);
const endW = ref(0);

onMounted(() => {
  if (!getToken()) {
    router.push({ path: '/login', query: { redirect: '/searchPage' } });
    return;
  }
  getList();
  getTypeList();
});
async function getList() {
  try {
    queryParams.value.SortOrder =
      queryParams.value.sortType + ' ' + queryParams.value.sortCategory;
    let query = {
      ...queryParams.value,
      ...page.value
    };
    let res = await GetCourseList_Page(query);
    tableList.value = res.data.List;
  } catch (error) {
    console.log(error);
  }
}

function handleSwitchSortType() {
  queryParams.value.sortCategory == 'DESC'
    ? (queryParams.value.sortCategory = 'ASC')
    : (queryParams.value.sortCategory = 'DESC');
  getList();
}

function handleSortType(val) {
  queryParams.value.sortType = val.value;

  getList();
}

function handleCommand(val) {
  queryParams.value.TypeName = val.Name;
  queryParams.value.Type = val.ID;
  activeType.value = val.ID;
  getList();
}

async function getTypeList() {
  try {
    let query = {
      Code: '',
      Name: '',
      NoPage: 'true'
    };
    let res = await GetTypeList_Page(query);
    // queryParams.value.TypeName = res.data?.[0].Name;
    TypeList.value = res.data;
  } catch (error) {
    console.log(error);
  }
}

async function handleGoDetail(item) {
  try {
    await AddViewCounts({ ID: item.ID });
    getList();
    window.open(
      import.meta.env.VITE_APP_BASE_HTTP + '/videoDetail?id=' + item.ID
    );
  } catch (error) {
    console.log(error);
  }
}

function handleChooseType(item, index) {
  activeType.value = item.ID;
  queryParams.value.TypeName = item.Name;
  queryParams.value.Type = item.ID;
  getList();
}

function handleMouseDown(e) {
  let startTime, endTime;
  let parent = document.getElementsByClassName('typeRow')[0];
  let child = document.getElementsByClassName('sliderBar')[0];
  let widthDiffer = parent.offsetWidth - child.offsetWidth;
  if (widthDiffer > 0) {
    //如果grand真实宽度比parent宽度长,那么就不用滑动了,直接返回
    isClick.value = true;
    return;
  }
  startTime = new Date().getTime(); //获取事件开始时间
  let disx = e.clientX - child.offsetLeft; //当前的节点减去 已经移动的数值
  isDrag.value = true; //设置开始拖拽
  child.style.transition = 'unset';
  parent.onmousemove = event => {
    if (isDrag.value) {
      // child.style.left = event.clientX - startW.value + 'px';
      let mouseX = event.clientX; // 鼠标点击的位置
      let x = mouseX - disx;
      child.style.left = x + 'px'; //设置parent的位置
    }
  };
  parent.onmouseup = e => {
    endTime = new Date().getTime();
    let timeDiffer = endTime - startTime; //获取抬起时间
    isDrag.value = false;
    if (timeDiffer < 150) {
      //时间间隔小于150,那么就判断为单击事件,这里时间间隔可自由设置
      isClick.value = true;
    } else {
      isClick.value = false;
      //拖拽结束,如果这里parent移出了grand边界,该怎么办呢?
      if (child.offsetLeft < parent.offsetWidth && child.offsetLeft > 0) {
        child.style.transition = 'all .5s linear';
        child.style.left = 0 + 'px';
      }
      if (child.offsetWidth + child.offsetLeft < parent.offsetWidth) {
        //child.offsetLeft 为负数
        let left = child.offsetWidth - parent.offsetWidth;
        child.style.transition = 'all .5s linear';
        child.style.left = '-' + left + 'px';
      }
    }
  };
}
</script>

<style lang="scss" scoped>
.app-main {
  height: 100vh;
  padding: 10px;
  .header {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    .searchBar {
      display: flex;
      height: 50px;
      width: 740px;
      flex-wrap: nowrap;
      border-radius: 25px;
      border: solid 2px #386ff1;
      border-right: transparent 2px;

      .category {
        width: 157px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 2px solid #386ff1;

        .pointer {
          text-align: center;
          line-height: 46px;
          .text {
            font-size: 18px;
          }
          :deep(.el-icon) {
            top: 5px;
          }
        }
        :deep(.el-dropdown) {
          width: 100%;
          height: 100%;
          .el-dropdown--default {
            width: 100%;
          }
        }
      }
      :deep(.searchInput) {
        width: 489px;
        .el-input {
          height: 100%;
          .el-input__inner {
            height: 100%;
            box-shadow: unset;
            font-size: 18px;
          }
        }
      }
      .searchBtn {
        width: 94px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #4478f0;
        color: white;
        border-radius: 0px 25px 25px 0;
        font-size: 30px;
        cursor: pointer;
        height: 50px;
        margin-top: -2px;
        &:hover {
          background-color: #1f5be9;
        }
      }
    }
  }
}
.typeRow {
  margin: 20px 0;
  display: flex;
  overflow: hidden;
  user-select: none;
  .sliderBar {
    position: relative;
  }
  .item {
    min-width: 160px;
    height: 60px;
    background-color: white;
    line-height: 60px;
    border-radius: 10px;
    text-align: center;

    & + .item {
      margin-left: 20px;
    }
  }
  .active-type {
    background-color: #386ff1;
    color: white;
  }
}
.pageBar {
  padding: 20px;
  background-color: white;
  .pointer {
    background-color: #efefef;
    height: 40px;
    border-radius: 20px;
    width: 120px;
    text-align: center;
    line-height: 40px;
    align-items: center;
    justify-content: center;
    color: #3b3131;
    :deep(.el-icon) {
      top: 2px;
    }
  }
}
.mainCentent {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
  margin-top: 20px;
  .item {
    min-width: 100px;
    max-height: 180px;
    padding: 6px;
    background-color: white;
    border-radius: 10px;
    cursor: pointer;
    .videoTitle {
      height: 20px;
      line-height: 20px;
      margin-top: 4px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      word-break: keep-all;
      max-width: 200px;
    }
    .pictrue {
      position: relative;
      height: 140px;
      .iconBar {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 73px;
        left: 0;
        border-radius: 0 0 10px 10px;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.00386607) 8.07%,
          rgba(0, 0, 0, 0.0152486) 15.54%,
          rgba(0, 0, 0, 0.033824) 22.5%,
          rgba(0, 0, 0, 0.0592687) 29.04%,
          rgba(0, 0, 0, 0.0912593) 35.26%,
          rgba(0, 0, 0, 0.129472) 41.25%,
          rgba(0, 0, 0, 0.173583) 47.1%,
          rgba(0, 0, 0, 0.22327) 52.9%,
          rgba(0, 0, 0, 0.278208) 58.75%,
          rgba(0, 0, 0, 0.338074) 64.74%,
          rgba(0, 0, 0, 0.402545) 70.96%,
          rgba(0, 0, 0, 0.471296) 77.5%,
          rgba(0, 0, 0, 0.544005) 84.46%,
          rgba(0, 0, 0, 0.620347) 91.93%,
          rgba(0, 0, 0, 0.7)
        );
        color: white;
        .view {
          position: absolute;
          line-height: 14px;
          bottom: 4px;
          left: 10px;
          display: flex;
          align-items: center;
          font-size: 14px;
          .el-icon {
            font-size: 20px;
            margin-right: 4px;
            margin-top: -2px;
          }
        }
      }
      .playIcon {
        position: absolute;
        font-size: 50px;
        color: rgb(207, 203, 203);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    :deep(.el-image) {
      max-height: 140px;
      height: 140px;
      border-radius: 10px;
      width: 100%;
      .el-image__inner {
        max-height: 140px;
        object-fit: cover;
      }
    }
  }
}
</style>
